<template>
  <div class="homepage-hero-module">
    <!-- 注册页 开始 -->
    <div class="video-container">
      <div :style="fixStyle" class="filter">
        <!--内容-->
        <!-- 登录失败 -->
        <div class="error" v-show="login_fail">手机号密码错误</div>
        <div class="error" v-show="register_fail">手机号已注册</div>
        <!-- 登录跳转 开始 -->
        <div class="login" v-if="isregister">
          <a href="javascript:;" @click="cutlogin">密码登录</a>
        </div>
        <div class="login" v-else>
          <a href="javascript:;" @click="cutregister">免费注册</a>
        </div>
        <!-- 注册框 开始 -->
        <div class="register_box" v-if="isregister">
          <p>手机号注册/登录</p>
          <div class="phone">
            <!-- 下拉框 开始 -->
            <div class="input" @click="openValue">
              <input v-model="value" type="text" placeholder="+86" />
              <img src="../assets/arrow.png" alt="" />
            </div>
            <div class="list" v-show="show">
              <ul>
                <li
                  @click="getvalue(index, item)"
                  v-for="(item, index) in tableData"
                  :key="item.index"
                >
                  {{ item.name }}
                </li>
              </ul>
            </div>
            <!-- 下拉框 结束 -->
            <input
              class="phone_text"
              type="text"
              name="phone"
              id="phone"
              v-model="phone"
              placeholder="输入手机号码"
              v-on:blur="chphone"
            />
            <!-- <input
              class="upwd"
              :type="this.login_data.pwdtype"
              name="upwd"
              id="upwd"
              v-model="upwd"
              placeholder="请输入密码"
              v-on:blur="chupwd"
            />
            <img :src="this.login_data.src" @click="changeType" /> -->
          </div>
          <!-- 注册 按钮开始 -->
          <div class="reg_button">
            <button :disabled="!agree" :class="btn_state" @click="register">
              下一步
            </button>
          </div>
          <!-- 注册 按钮结束 -->
        </div>
        <!-- 注册框 结束 -->
        <!-- 登录框 开始 -->
        <div class="register_box" v-else>
          <p>密码登录</p>
          <div class="phone">
            <!-- 下拉框 -->
            <div class="input" @click="openValue">
              <input v-model="value" type="text" placeholder="+86" />
              <img src="../assets/arrow.png" alt="" />
            </div>
            <div class="list" v-show="show">
              <ul>
                <li
                  @click="getvalue(index, item)"
                  v-for="(item, index) in tableData"
                  :key="item.index"
                >
                  {{ item.name }}
                </li>
              </ul>
            </div>
            <!-- 下拉框 -->
            <input
              class="phone_text"
              type="text"
              name="phone"
              id="phone"
              v-model="phone"
              placeholder="输入手机号码"
            />
            <input
              class="upwd"
              :type="this.login_data.pwdtype"
              name="upwd"
              id="upwd"
              v-model="upwd"
              placeholder="请输入密码"
              v-on:blur="chupwd()"
            />
            <img :src="this.login_data.src" @click="changeType()" />
            <div class="reg_button">
              <button :disabled="!agree" :class="btn_state" @click="chfrom">
                登录
              </button>
            </div>
            <!-- 忘记密码 开始 -->
            <div class="forgetpwd">
              <span><a href="javascript:;">忘记密码</a></span>
              <span>|</span>
              <span><router-link to="/index">随便逛逛</router-link></span>
            </div>
            <!-- 忘记密码 结束 -->
          </div>
        </div>
        <!-- 登录框 结束 -->
        <!-- 合作登录 开始 -->
        <div class="cooperation_login">
          <div>
            <a href="javascript:;"><img src="../assets/wx.png" /></a>
          </div>
          <div>
            <a href="javascript:;"><img src="../assets/QQ.png" /></a>
          </div>
        </div>
        <!-- 合作登录 结束 -->
        <!-- 同意 开始 -->
        <div class="agree">
          <input
            class="tui-checkbox"
            type="checkbox"
            v-model="agree"
            @click="cutagree"
          />我已阅读并同意<a href="javascript:;">用户协议</a>和<a
            href="javascript:;"
            >隐私政策</a
          >
        </div>
        <!-- 同意 结束 -->
      </div>
      <!-- 背景视频 开始 -->
      <video
        :style="fixStyle"
        autoplay
        loop
        muted
        class="fillWidth"
        v-on:canplay="canplay"
      >
        <source src="../assets/video/register.mp4" type="video/mp4" />
        浏览器不支持 video 标签，建议升级浏览器。
        <source src="../assets/video/G1w.webm" type="video/webm" />
        浏览器不支持 video 标签，建议升级浏览器。
      </video>
      <div class="poster hidden" v-if="!vedioCanPlay">
        <img :style="fixStyle" src="../assets/video/G1.jpg" alt="" />
      </div>
      <!-- 背景视频 结束 -->
    </div>
    <!-- 注册页 结束 -->
  </div>
</template>

<script>
import { mapActions } from "vuex";
export default {
  name: "Video",
  data() {
    return {
      // 手机号码
      phone: "",
      upwd: "",
      // 按钮是否可以用
      btn_state: {
        btn_disabld: true,
        btn_available: false,
      },
      // 密码是否可见
      login_data: {
        pwdtype: "password",
        src: require("../assets/close_eyes.png"),
      },
      // 同意是否勾选
      agree: false,
      // 切换注册/登录
      isregister: true,
      // 视频背景是否播放
      vedioCanPlay: false,
      // 视频窗口大小
      fixStyle: "",
      // 下拉框显示内容
      tableData: [
        {
          name: "+86",
        },
        {
          name: "+852",
        },
        {
          name: "+853",
        },
        {
          name: "+886",
        },
      ],
      // 下拉框默认显示状态
      show: false,
      // 登录失败
      login_fail: false,
      register_fail: false,
      // 下拉框显示内容
      value: "",
    };
  },
  methods: {
    ...mapActions(["vlogin"]),
    // 验证手机号格式
    chphone() {
      let regphone = /^1[3-9]\d{9}$/;
      if (regphone.test(this.phone) && this.agree == true) {
        this.btn_state = {
          btn_disabld: true,
          btn_available: false,
        };
        return true;
      } else {
        this.btn_state = {
          btn_disabld: false,
          btn_available: true,
        };
        return false;
      }
    },
    // 验证密码格式
    chupwd() {
      let regupwd = /^[a-zA-Z0-9]{6,18}$/;
      if (regupwd.test(this.upwd) && this.agree == true) {
        this.btn_state = {
          btn_disabld: false,
          btn_available: true,
        };
        return true;
      } else {
        this.btn_state = {
          btn_disabld: true,
          btn_available: false,
        };
        return false;
      }
    },
    // 验证手机号是否存在
    register() {
      if (this.chphone() == true) {
        this.$router.push(`/Verification/${this.phone}`);
      }
    },
    // 登录
    chfrom() {
      this.axios
        .post("/user/login", `phone=${this.phone}&upwd=${this.upwd}`)
        .then((result) => {
          if (result.data.code == 200) {
            let un = result.data.result;
            this.$store.commit("loginOK", un);
            sessionStorage.setItem("islogin", "true");
            sessionStorage.setItem("uid", un.uid);
            sessionStorage.setItem("phone", un.phone);
            sessionStorage.setItem("uname", un.uname);
            sessionStorage.setItem("gender", un.gender);
            sessionStorage.setItem("area", un.area);
            sessionStorage.setItem("autograph", un.autograph);
            sessionStorage.setItem("avatar", un.avatar);
            this.$router.push(`/index`);
          } else if (result.data.code == 201) {
            this.login_fail = true;
          }
        });
    },
    // 切换同意用户服务
    cutagree() {
      if (this.agree == true) {
        this.btn_state = {
          btn_disabld: true,
          btn_available: false,
        };
      } else {
        this.btn_state = {
          btn_disabld: false,
          btn_available: true,
        };
      }
    },
    // 变更密码可见状态
    changeType() {
      this.login_data.pwdtype =
        this.login_data.pwdtype === "password" ? "text" : "password";
      this.login_data.src =
        this.login_data.src === require("../assets/close_eyes.png")
          ? require("../assets/open_eyes.png")
          : require("../assets/close_eyes.png");
    },
    // 切换为登录
    cutlogin() {
      this.isregister = false;
    },
    // 切换为注册
    cutregister() {
      this.isregister = true;
    },
    // 打开下拉框
    openValue() {
      this.show = !this.show;
    },
    // 获取国家编号输入框
    getvalue(index, item) {
      this.value = item.name;
      this.show = false;
    },
    // 浏览器准备播放背景视频
    canplay() {
      this.vedioCanPlay = true;
    },
  },
  mounted: function () {
    //屏幕自适应
    window.onresize = () => {
      // 获取屏幕宽
      const windowWidth = document.body.clientWidth;
      // 获取屏幕高
      const windowHeight = document.body.clientHeight;
      // 获取宽高比
      const windowAspectRatio = windowHeight / windowWidth;
      // 申明视频宽
      let videoWidth;
      // 申明视频高
      let videoHeight;
      // 判断宽高比
      if (windowAspectRatio < 0.5625) {
        // 视频宽等于屏幕宽
        videoWidth = windowWidth;
        // 视频高等于屏幕高*宽高比
        videoHeight = videoWidth * 0.5625;
        this.fixStyle = {
          // 获取绝对定位宽高
          height: windowWidth * 0.5625 + "px",
          width: windowWidth + "px",
          "margin-bottom": (windowHeight - videoHeight) / 2 + "px",
          "margin-left": "initial",
        };
      } else {
        videoHeight = windowHeight;
        videoWidth = videoHeight / 0.5625;
        this.fixStyle = {
          height: windowHeight + "px",
          width: windowHeight / 0.5625 + "px",
          "margin-left": (windowWidth - videoWidth) / 2 + "px",
          "margin-bottom": "initial",
        };
      }
    };
    window.onresize();
  },
};
</script>

<style>
* {
  padding: 0;
  margin: 0;
}
a {
  text-decoration: none;
}
ul li {
  list-style: none;
}
/* 登录失败 */
.homepage-hero-module .error {
  width: 100%;
  height: 26px;
  line-height: 26px;
  position: absolute;
  top: 0;
  background-color: #dc3545;
  color: #fff;
}
/* 登录注册跳转按钮 */
.homepage-hero-module .login {
  color: #fff;
  position: fixed;
  top: 5%;
  right: 50%;
  transform: translate(250%, 5%);
  font-size: 14px;
}
.homepage-hero-module .login > a {
  color: #fff;
}
/* 注册框 */
.homepage-hero-module .register_box {
  margin: 10% auto;
  width: 250px;
  height: 300px;
  padding: 20px 0;
  color: #fff;
  text-align: right;
}
.homepage-hero-module .register_box > p {
  font-size: 24px;
  text-align: left;
  color: #fff;
}
.homepage-hero-module .phone {
  margin-top: 50px;
  position: relative;
}
.homepage-hero-module .phone > img {
  position: absolute;
  right: 20px;
  top: 78px;
  width: 25px;
}
.homepage-hero-module .phone_text {
  width: 150px;
  height: 40px;
  border-radius: 40px;
  border: 0;
  color: #fff;
  font-size: 20px;
  font-family: "宋体";
  outline: none;
  background-color: rgba(255, 255, 255, 0.2);
  padding: 0 20px 0 80px;
}
.homepage-hero-module .upwd {
  width: 110px;
  height: 40px;
  border-radius: 40px;
  border: 0;
  color: #fff;
  font-size: 20px;
  font-family: "宋体";
  outline: none;
  background-color: rgba(255, 255, 255, 0.2);
  padding: 0 60px 0 80px;
  margin-top: 30px;
}
.homepage-hero-module .phone > input::-webkit-input-placeholder {
  color: #eee;
  font-size: 16px;
  line-height: 40px;
}

/* 下拉列表 */
.homepage-hero-module .input {
  width: 50px;
  height: 40px;
  line-height: 40px;
  position: absolute;
  left: 10px;
}
.homepage-hero-module .input input {
  width: 40px;
  border: none;
  outline: none;
  background-color: transparent;
  caret-color: transparent;
  color: #fff;
}
.homepage-hero-module .input input::-webkit-input-placeholder {
  color: #fff;
}
.homepage-hero-module .input img {
  width: 20px;
  position: absolute;
  left: 36px;
  top: 28%;
}
.homepage-hero-module .list {
  width: 50px;
  overflow: hidden;
  position: absolute;
  border-radius: 10px;
  top: 40px;
  left: 10px;
  text-align: center;
}
.homepage-hero-module .list ul li {
  height: 30px;
  cursor: pointer;
  line-height: 30px;
  font-size: 16px;
}

/* 按钮 */
.homepage-hero-module .reg_button {
  width: 250px;
  height: 40px;
  margin: auto;
  margin-top: 50px;
}
.homepage-hero-module .btn_disabld {
  width: 250px;
  height: 40px;
  border-radius: 40px;
  border: 0;
  background-color: rgba(100, 100, 100, 0.4);
  font-size: 16px;
  color: #999;
}
.homepage-hero-module .btn_available {
  width: 250px;
  height: 40px;
  border-radius: 40px;
  border: 0;
  background-color: rgba(0, 150, 255, 0.5);
  font-size: 16px;
  color: #ddd;
}
/* 忘记密码 */
.homepage-hero-module .forgetpwd {
  width: 200px;
  line-height: 30px;
  margin: 20px auto;
  display: flex;
  font-size: 14px;
  justify-content: space-around;
}
.homepage-hero-module .forgetpwd > span > a {
  color: #eee;
}
/* 合作登录 */
.homepage-hero-module .cooperation_login {
  width: 150px;
  height: 40px;
  margin: 0 auto;
  display: flex;
  justify-content: space-around;
  position: fixed;
  bottom: 10%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.homepage-hero-module .cooperation_login > div {
  width: 40px;
  height: 40px;
  border-radius: 25px;
  text-align: center;
  line-height: 56px;
  background-color: rgba(255, 255, 255, 0.2);
}
.homepage-hero-module .cooperation_login > div > a > img {
  width: 25px;
}
/* 同意框 */
.homepage-hero-module .agree {
  width: 250px;
  margin: 10px auto;
  font-size: 12px;
  color: #ccc;
  display: flex;
  position: fixed;
  bottom: 1%;
  left: 50%;
  transform: translate(-50%, -50%);
  justify-content: center;
  align-items: center;
}
.homepage-hero-module .agree > a {
  color: #bce0ff;
}
.homepage-hero-module .agree > .tui-checkbox:checked {
  background: #007bff;
}
.homepage-hero-module .agree > .tui-checkbox {
  width: 17px;
  height: 17px;
  background-color: transparent;
  border: 2px solid #ddd;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  font-size: 0.8rem;
  margin-right: 10px;
  padding: 0;
  position: relative;
  display: inline-block;
  vertical-align: top;
  cursor: default;
  -webkit-appearance: none;
  -webkit-user-select: none;
  user-select: none;
  -webkit-transition: background-color ease 0.1s;
  transition: background-color ease 0.1s;
}
.homepage-hero-module .agree > .tui-checkbox:checked::after {
  content: "";
  top: 0;
  left: 0;
  position: absolute;
  background: transparent;
  border: #fff solid 2px;
  border-top: none;
  border-right: none;
  height: 5px;
  width: 15px;
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
/* 确认同意 */
.homepage-hero-module .isagree {
  color: #fff;
  width: 120px;
  height: 30px;
  line-height: 30px;
  position: fixed;
  bottom: 8%;
  left: 50%;
  transform: translate(-133%, 0);
  background-color: rgba(255, 255, 255, 0.2);
  border-radius: 30px;
}
.homepage-hero-module .isagree::after {
  content: "";
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid rgba(255, 255, 255, 0.2);
  position: absolute;
  bottom: -10px;
  left: 40%;
}
/* 全局 */
.homepage-hero-module,
.video-container {
  position: relative;
  height: 100vh;
  overflow: hidden;
}

.homepage-hero-module .video-container .poster img {
  z-index: 0;
  position: absolute;
}

.homepage-hero-module .video-container .filter {
  z-index: 1;
  position: absolute;
  background: rgba(0, 0, 0, 0.4);
  width: 100%;
}

.homepage-hero-module .fillWidth {
  width: 100%;
}
</style>
